<template>
  <RadioGroup 
  v-if="renderType=='RadioGroup'" 
  api="/sys/dict/getByDictType" 
  :params="{dictType: code}"
  v-bind="{
    optionType: 'button',
    buttonStyle: 'solid',
    ...$attrs,
  }"
  />
  <Select v-else api="/sys/dict/getByDictType" :params="{dictType: code}">
    <template v-for="item in slotKeys.filter(key=>props[key])" #[item]>
      <component :is="renderSlot(props,item)"/>
    </template>
    <template v-if="dropdownRenderBefore || dropdownRenderAfter" #dropdownRender="{ menuNode: menu }">
      <component :is="renderSlot(props,'dropdownRenderBefore')"/>
      <VNodes :vnodes="menu" />
      <component :is="renderSlot(props,'dropdownRenderAfter')"/>
    </template>
  </Select>
</template>
<script setup lang="ts">
import { PropType, VNode } from 'vue';
import Select from './Select.vue';
import RadioGroup from './RadioGroup.vue';

import { renderSlot } from '../index'
const slotKeys = ['clearIcon','maxTagPlaceholder','menuItemSelectedIcon','notFoundContent','removeIcon','suffixIcon']

const props = defineProps({
  renderType: {
    type: String,
    default: 'Select'
  },
  code: { // 字典类型，和接口的dictType一致
    type: String
  },
  clearIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  maxTagPlaceholder: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  menuItemSelectedIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  notFoundContent: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  removeIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  suffixIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  dropdownRenderBefore: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  dropdownRenderAfter: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
})
const VNodes=(_: any, d: any) => {
  return d.attrs.vnodes;
}
</script>
<style lang="less" scoped>

</style>